<template>
  <view class="select-school-template">
    <u-row>
      <u-col span="10">
        <view class="school-name">
          {{ schoolName }}
        </view>
      </u-col>
      <u-col span="2">
        <view class="switch-icon" @click="switchIcon">
          <image
            src="../../static/images/switch.png"
            class="images"
            mode=""
          ></image>
        </view>
      </u-col>
    </u-row>

    <u-picker
      :show="show"
      ref="uPicker"
      :columns="columns"
      @confirm="confirm"
      @change="changeHandler"
      @cancel="cancel"
      keyName="schoolName"
    ></u-picker>
  </view>
</template>

<script>
export default {
  name: "select-school",
  data() {
    return {
      //是否显示picker选择器
      show: false,
      
    };
  },
  methods: {
    changeHandler(e) {
      const {
        columnIndex,
        value,
        values, // values为当前变化列的数组内容
        index,
        // 微信小程序无法将picker实例传出来，只能通过ref操作
        picker = this.$refs.uPicker,
      } = e;
      if (columnIndex === 0) {
        // picker为选择器this实例，变化第二列对应的选项
        picker.setColumnValues(1, this.columnData[index]);
      }
    },
    /**
     * 确认选择的学校
     */
    confirm(e) {
      const item = e.value[1];
      this.$emit("prickerConfirm", item);
      this.show = false;
    },
    cancel() {
      this.show = false;
    },
    /**
     * 点击图标按钮切换学校
     */
    switchIcon() {
      this.show = true;
    },
  },
  props: {
    schoolName: {
      type: String,
      default: "点击切换学校图标选择学校",
      required: true,
    },
    columns: {
      type: Array,
      default: [],
      required: true,
    },
    columnData: {
      type: Array,
      default: [],
      required: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.select-school-template {
  margin-bottom: $uni-spacing-col-lg;
  padding: 8rpx 10rpx;
  background-color: #fff;
  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.1);
  border-radius: 12rpx;
  .school-name {
    color: #909399;
    line-height: 80rpx;
  }
  /deep/ .images {
    width: 64rpx;
    height: 64rpx;
  }
  .switch-icon {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
